<template>
  <div>
    <!--tree-->
    <div class="left" v-if="isShow">
      <div class="public-common" style="width: 95%;">
          <div class="public-title" style="text-indent: 20px;">部门结构
            <i class="el-icon-arrow-left" @click="changeStatus" style="float: right;margin-right: 10px;line-height: 30px;"></i>
            <i class="el-icon-refresh" @click="reflash" style="float: right;line-height: 30px;"></i>
          </div>
          <div style="margin-top:10px;">
            <el-input  placeholder="请输入部门"  v-model="deptname"></el-input>
          </div>
           <el-tree :data="deptList"  node-key="id" ref="tree" @node-click="handleNodeClick"
          :default-expand-all="true" :props="defaultProps"
          :filter-node-method="filterNode"></el-tree>
      </div>
    </div>
    <div v-if="!isShow" class="show">
      <i class="el-icon-arrow-right" @click="changeStatus" style="float: right;margin-right: 10px;line-height: 30px;"></i>
    </div>
    <!--table-->
    <div class="right">
    <div class="public-common" style="width: 95%;">
        <div class="public-title" style="text-indent: 20px;">部门列表</div>
        <div class="inline-btn">
          <label>部门名称：</label>
          <el-input v-model="searchdata.txtOrgName"></el-input>
          <label>部门编码：</label>
          <el-input v-model="searchdata.txtOrgCode"></el-input>
        </div>
        <div class="inline-btn">
          <label>部门类型：</label>
          <el-input v-model="searchdata.txtOrgCategory"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="OrgName"  label="部门名称" sortable></el-table-column>
            <el-table-column prop="OrgCode"  label="部门编码" sortable></el-table-column>
            <el-table-column prop="OrgCategory"  label="部门类型" sortable></el-table-column>
            <el-table-column prop="OrderNumber"  label="排序号" sortable></el-table-column>
            <el-table-column prop="ParentOrgName"  label="上级部门" sortable></el-table-column>
            <el-table-column prop="Status"  label="状态" sortable></el-table-column>
            <el-table-column prop="CreatorText"  label="创建人" sortable></el-table-column>
            <el-table-column prop="CreateDate"  label="创建时间" sortable></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--dialog-->
    <el-dialog title="部门基本信息" :visible.sync="dialogVisible">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
          <el-form-item label="部门名称：" prop="txtOrgName">
            <el-input v-model="formData.txtOrgName" style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item label="部门编码：" prop="txtOrgCode">
            <el-input v-model="formData.txtOrgCode" style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item label="部门类型：" prop="txtOrgCategory">
            <el-select v-model="formData.txtOrgCategory" placeholder="请选择部门类型">
              <el-option v-for="(t,i) in deptType" :label="t" :key="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上级部门：" prop="txtParentName">
            <el-input v-model="formData.txtParentName" style="width: 220px;" :disabled="isParent"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="txtStatus">
            <el-checkbox label="启用" v-model="formData.txtStatus"></el-checkbox>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>
  </div>
 </div>
</template>
<script>
import {dept} from '@/ajax';
import config from './Manage.js';
export default {
    data(){
        return {
          searchdata:{
            txtOrgName:'',txtOrgCode:'',txtOrgCategory:'',txtOrgId:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          formData:{txtOrgName:'',txtOrgCode:'',txtOrgCategory:'',txtParentName:'',
                    txtStatus:''},
          formRule:{
            txtOrgName:{required:true,message:'请填写部门名称',trigger:'blur'},
            txtOrgCategory:{required:true,message:'请选择部门类型',trigger:'blur'}
          },
          index:0,
          selection:[],
          config:config,
          deptType:config.deptType,
          deptList:config.deptList,
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          nodeList:[],
          deptname:'',
          isShow:true,
          isParent:false
        }
    },
    mounted(){
      this.getDeptList();
    },
    inject:['reload'],
    methods:{
      //getDeptList,deleteDeptMessage,addDeptMessage
      searchBtn(){
        this.formData.txtParentName = ''
        this.isParent = false
        this.getDeptList();
      },
      //进行循环找到合适的数据
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      //获取选中所有部门
      getCurrentKey(val){
        this.nodeList = this.$refs.tree.getCheckedNodes();
      },
      //进行选择
      handleNodeClick(val){
        console.log('choose',val.label)
        this.searchdata.txtOrgId = val.id
        this.formData.txtParentName = val.label
        this.isParent = true
        this.getDeptList()
      },
      reflash(){
        this.getAllDept();
      },
      changeStatus(){
        this.isShow = !this.isShow
      },
      //获取所有部门
      getAllDept(){
        //搜索条件？？
        this.deptList = config.deptList1
        /* dept.getAllDept().then((res) => {
           if (res.data.code == '00000') {
            this.deptList = res.data.data
           } else {
            this.$message(res.data.message);
           }
        }).catch(()=>{
        }) */
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['OrgID'])
          }
        }
      },
      getDeptList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData =config.assetsList;
        this.totalnum = this.tableData.length;
        /* dept.getDeptList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取固定资产列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getDeptList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getDeptList();
      },
      addBtn(){
        this.dialogVisible = true;
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.$refs[form].resetFields();
        this.dialogVisible=false;
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择一条要操作的数据')
        }else{
           dept.deleteDeptMessage({assetNo:JSON.stringify(this.selection)}).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，删除失败');
            })
        }
      },
      //进行添加（通过type区分应用确定，应用1确定2）
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            dept.addDeptMessage(this.formData).then((res) => {
                if (res.data.code == '00000') {
                  if(type == 1){
                    this.$refs[form].resetFields();
                  }else{
                    this.reload()
                  }
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，操作失败');
            })
          }else{
            return false
          }
        })
      }
    },
    watch:{
      deptname(val) {
        this.$refs.tree.filter(val);
      }
    }
}
</script>
<style lang="scss">
  .left{display: inline-flex; width: 30%; float: left;}
  .right{float: left;width: 70%;display: inline-flex;}
  .show{float: left;
    min-height: 400px;
    background-color: #deecfd;
    margin-right: 10px;
    text-align: center;}
  .public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input,.el-select,.el-date-picker{width: 200px !important;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
